<template>
	<div>
		<div v-for="(item, index) in parentTreeData" :key="index" class="classifyButtonList">
			<div  flex="cross:center" flex-wrap style="height: 100%;"> 
				<div class="title">
					<!-- <i class="el-icon-caret-bottom"  @click="showHidden(item, index)"></i> -->
					<i v-if="item.children" :class="item.isShow?'el-icon-caret-top':'el-icon-caret-bottom'"@click="showHidden(item, index)"></i>
					 <!-- <el-checkbox v-model="item.checked">{{item.label}}</el-checkbox> -->
					{{item.label}}
				</div>  
				<div flex flex-wrap="cross:center" style="width: 79%;">
					<p class="recordText" v-for="(el,index) in item.buttonList">{{el.NameCN}}</p>
				</div>
			</div>
			<menu-tree v-if="item.isShow && item.children" :parent-tree-data="item.children"></menu-tree>
		</div>
	</div>
</template>

<script>
	export default {
		name: "menuTree",
		props: {
			parentTreeData: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		methods: {
			// 展开或者隐藏下级目录
			showHidden(item, index) {
				// this.parentTreeData.forEach(value => {
				// 	// parentTreeData[i]的show属性不等于当前数据的isShow属性那么menuList[i]等于false
				// 	if (value.isShow !== this.parentTreeData[index].isShow) {
				// 		value.isShow = false;
				// 	}
				// });
				item.isShow = !item.isShow;
				this.$forceUpdate()
			},
			setCheck(menuIDs){
				this.setButtonName(this.parentTreeData,menuIDs)
				// this.$forceUpdate()
			},
			setButtonName(menuData,data) {
				menuData.forEach((el, index) => {
					data.forEach(item=>{
						if (el.id == item) {
							el.checked = true
						}
					})
					if (el.children != null && el.children && el.children.length) {
						this.setButtonName(el.children,data)
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	$activeColor: var(--bg-color, "#00aaff");

	.el-icon-star-on {
		/* color: #00aa00; */
		color: $activeColor;
	}
	.recordText {
		border: 1px solid #fff;
		padding: 3px 10px;
		text-align: center;
		font-size: 14px;
		cursor: pointer;
		background: #f2f2f2;
		color: #4e4e4e;
		margin:5px;
		border-radius: 5px;
	}
	
	.recordText.active {
		background-color: $activeColor;
		color: white;
	}
</style>
<style scoped lang="scss">
	.tree-div {

	}
	.classifyButtonList{
		// margin-bottom: 10px;
		padding: 0 0 0 10px;
		// cursor: pointer;
		line-height: 25px;
		.title{
			// text-align: right;
			// width: 20%;
		}

	}
</style>
